<template>
	<div class="firstVisit">
		<el-row style="text-align:center;">
			<el-col :span="6" :offset="8" v-if="!isFirstVisit()">可能疾病</el-col>
			<el-col :span="6" :offset="8" v-if="isFirstVisit()">初步诊断</el-col>
			<el-col :span="10">
				<el-row type="flex" justify="end">
					<!-- <el-col :span="12" title="添加新诊断" style="font-size:16pt;text-align:right;cursor:pointer;">
						<el-button disabled size="mini" round>添加</el-button>	
					</el-col> -->
					<el-col :span="12" style="font-size:16pt;text-align:center;">
						<!-- <i class="el-icon-d-arrow-right" title="获取处置内容" @click="getDisposals"></i> -->
						<el-button size="mini" round @click="getDisposals">确定</el-button>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
		<div class="visitContent">
			<el-checkbox-group v-model="checkDiseases">
				<el-row>
					<el-col :span="24" v-for="(item,index) in emergencyDisease" :key="index">
						<el-checkbox :label="item.diseaseCode" class="emergencyDisease">
							<span style="color:#ff0000;">{{item.diseaseName}}</span>
						</el-checkbox>
					</el-col>
				</el-row>
				<el-row v-if="!isFirstVisit()" v-for="(item,index) in diseaseList" :key="index">
					<el-col :span="24">
						<el-checkbox :label="item.diseaseCode" class="visit">
							<el-popover v-if="item.inspectList"
		  						placement="right"
		  						title="检查指标内容"
		  						width="400"
		  						trigger="hover">
		  						<slot>
		  							<div v-for="(ite,inde) in item.inspectList" :key="'inspect_'+inde">
		  								<span style="font-weight:bolder;color:orange">
		  									<i class="el-icon-caret-bottom"></i>参照指标{{inde+1}}
		  								</span><hr>
		  								<p v-for="(it,ind) in ite" :key="'item_'+ind">
											<i class="el-icon-caret-right"></i>
											<span style="font-weight:bolder;">【{{it.inspectName}}】</span>
											<span>{{it.itemName}}</span><span v-if="it.itemType==2" style="color:orange;cursor:pointer;" @click="showExample(it)">[影像示例]</span>
										</p>
		  							</div>
		  						</slot>
		  						<p slot="reference" v-for = "(it,inde) in item.diseaseName.split('/')" :key="'contne_'+inde">{{it}}</p>
							</el-popover>
							<p v-if="!item.inspectList" v-for = "(it,inde) in item.diseaseName.split('/')" :key="'contne_'+inde">{{it}}</p>
						</el-checkbox>
					</el-col>
				</el-row>
				<el-row v-if="isFirstVisit()" v-for="(item,index) in firstVisitList" :key="index">
					<el-col :span="24">
						<el-checkbox :label="item.diseaseCode" class="visit">
							<el-popover v-if="item.inspectList!=null"
		  						placement="right"
		  						title="检查指标内容"
		  						width="400"
		  						trigger="hover">
		  						<slot>
		  							<div v-for="(ite,inde) in item.inspectList" :key="'inspect_'+inde">
		  								<span style="font-weight:bolder;color:orange">
		  									<i class="el-icon-caret-bottom"></i>参照指标{{inde+1}}
		  								</span><hr>
		  								<p v-for="(it,ind) in ite" :key="'item_'+ind">
											<i class="el-icon-caret-right"></i>
											<span style="font-weight:bolder;">【{{it.inspectName}}】</span>
											<span>{{it.itemName}}</span><span v-if="it.itemType==2" style="color:orange;cursor:pointer;" @click="showExample(it)">[影像示例]</span>
										</p>
		  							</div>
		  						</slot>
		  						<p slot="reference" v-for = "(it,inde) in item.diseaseName.split('/')" :key="'contne_'+inde">{{it}}</p>
		  						<!-- <span slot="reference">{{item.diseaseName}}</span> -->
							</el-popover>
							<p v-if="item.inspectList==null" v-for = "(it,inde) in item.diseaseName.split('/')" :key="'contne_'+inde">{{it}}</p>
							<!-- <span v-if="item.inspectList==null">{{item.diseaseName}}</span> -->
						</el-checkbox>
					</el-col>
				</el-row>
		<!-- 		<el-row v-if="isFirstVisit()">
					<el-col :span="24" v-for="(item,index) in emergencyDisease" :key="index">
						<el-checkbox :label="item.diseaseCode">
							<span>{{item.diseaseName}}</span>
						</el-checkbox>
					</el-col>
				</el-row> -->
			</el-checkbox-group>
				<el-dialog
				:title="'【'+curInspectItem.itemName+'】'+'对比影像图'"
				:visible.sync="innerDialogVisible"
				width="90%">
				<el-row>
					<el-col :span="24" v-html="curInspectItem.itemDescribe" style="color:orange;font-size:14pt;"></el-col>
				</el-row>
				<el-row class="operation">
					<el-col :span="1"><i class="iconfont icon-fangda">放大</i></el-col>
					<el-col :span="1"><i class="iconfont icon-suoxiao">缩小</i></el-col>
					<el-col :span="1"><i class="iconfont icon-fangda2">还原</i></el-col>
				</el-row>
				<div style="text-align:center;">
					<img :width="picWidth+'%'" :src="'./static/sternums/'+pictures[curInspectItem.itemCode]">
				</div>
				<span slot="footer" class="dialog-footer">
					<!-- <el-button @click="innerDialogVisible = false">取 消</el-button> -->
					<el-button type="primary" @click="innerDialogVisible = false">关闭</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>
<script type="text/javascript">
import bus from '@/eventBus.js'
	export default{
		name: 'FirstVisit',
		data(){
			return {
				checkDiseases:[],
				diseaseList:[],
				firstVisitList:[],
				emergencyDisease: [],
				//inspects:[],
				curInspectItem:'',
				dialogVisible: false,
				innerDialogVisible: false,
				checkInspects:[],
				picWidth: 100,
				pictures:{
					'x1.1':"x1.1.jpg",//胸片正常
					'x1.2':"x1.2.jpg",//双肺纹理增生
					'x1.3':"x1.3.jpg",//肺部感染
					'x1.4':"x1.4.jpg",//大叶性肺炎
					'x1.5':"",//化脓性肺炎
					'x1.6':"x1.6.jpg",//肺脓肿
					'x1.7':"x1.7.jpg",//支气管扩张
					'x1.8':"x1.8.jpg",//气胸
					'x1.9':"x1.9.jpg",//胸腔积液
					'x1.10':"x1.10.jpg",//肺结核
					'x1.11':"x1.11.jpg",//肺癌
					'x1.12':"x1.12.jpg",//肋骨骨折
					'x1.13':"",//蝴蝶样渗出
					'x1.14':"x1.14.jpg",//肺气肿
					'x1.15':"x1.15.jpg",//肺动脉高压
					'x1.16':"",//毛细支气管炎
					'x1.3.1':"x1.3.1.jpg",//小儿肺部感染
				}
			}
		},
	computed:{
		lightRank(){
			return this.$store.state.lightRank;
		},
		recordData(){
				return this.$store.state.recordData;
			},
		firstGroups(){
			return this.$store.state.firstGroups;
		},
		recordData(){
			return this.$store.state.recordData;
		},
		reFirstDone(){
			return this.$store.state.reFirstDone;
		},
		symptomPanelData(){
			return this.$store.state.symptomPanelData;
		}
	},
		methods:{
			isFirstVisit:function(){
				if (this.firstVisitList.length>0) {
					return true;
				}else{
					return false;
				}
			},
			getDisposals:function(){
				if (this.checkDiseases.length == 0) {
					this.$store.commit({
							type: "setDisposal",
							disposal: {
								diseaseCodes:'none',
								timeStamp:new Date().getTime()
							}
					});
					return;
				}else{
					//执行疾病获取处置内容
					var newDiseaseCodes = this.checkDiseases.join(',');
					console.log("执行疾病获取处置内容："+newDiseaseCodes)
					this.$store.commit({
							type: "setDisposal",
							disposal: {
								diseaseCodes:newDiseaseCodes,
								timeStamp:new Date().getTime()
							}
					});
				}
			},
			showChecks:function(){
				if (this.firstVisitList != null && this.firstVisitList.length >0) {
					this.dialogVisible = true;
				}else{
					alert("当前无初诊数据，暂无可显示的检查内容");
					return;
				}
			},
			closeChecks:function(){
				this.dialogVisible = false;
			},
      		showExample:function(inspectItem){
      			this.innerDialogVisible = true;
      			this.curInspectItem = inspectItem;
      			console.log("检查内容是："+this.curInspectItem.itemName);
      		}
		},
		created:function(){
			//this在后面指向发生了变化，所以先保存下来
			var vm =this;
			bus.$on('queryMayDisease',(menu)=>{
				if (menu=="none") {
					vm.diseaseList=[];
					return;
				}
				var complaintCode = menu.complaintCode;
				vm.firstVisitList = [];
				vm.checkDiseases = [];
				vm.diseaseList = [];
				$.ajax({
                    type:"get",
                    url:CONST.url+"getDiseaseByComplaint",
                    data:{"complaintCode": complaintCode},
                    success:function(result){
                        if (result.code==0||result.code=='0') {
                        	vm.diseaseList = result.data;
                        }else{
                        	alert("主诉数据请求失败！");
                        }
                    },
                    error:function(){
                    	alert("主诉数据请求失败！");
                    }
                })
			});
			//根据选择的症状请求初诊内容
			bus.$on('findFirstVisit',(findGroupItem)=>{
				console.log("传来的症状组合："+findGroupItem.complaintCode+"------------"+findGroupItem.groupContent);
				$.ajax({
                    type:"post",
                    url:CONST.url+"getDisease",
                    data:{
                    	"complaintCode": findGroupItem.complaintCode,
                    	"groupContent": findGroupItem.groupContent,
                    	"lightRank": parseInt(vm.lightRank)+1
                		},
                    success:function(result){
                    	vm.firstVisitList = [];
						vm.emergencyDisease = [];
						vm.checkDiseases = [];
                        if (result.code==0||result.code=='0') {
                        	if (result.data&&result.data.diseaseList) {
                        		result.data.diseaseList.forEach(function(disease){
                        			if (disease.diseaseType=="E") {
                        				vm.emergencyDisease.push(disease);
                        				vm.checkDiseases.push(disease.diseaseCode);
                        			}else{
                        				vm.firstVisitList.push(disease);
                        			}
                        		});
                        	}
                        	//绑定回显疾病
        					if (vm.reFirstDone=="FIRSTSEND") {
        						vm.checkDiseases=[];
								if (vm.recordData&&vm.recordData.recordDiagnosis) {
									//需要增加紧急疾病勾选判断逻辑,避免用户取消导致回显仍被勾选
									vm.emergencyDisease.forEach(function(disease){
											if (vm.recordData.recordDiagnosis.indexOf(disease.diseaseName+"###")>=0) {
												vm.checkDiseases.push(disease.diseaseCode);
												console.log("AAAA:"+disease.diseaseCode);
											}
										});
									if (vm.isFirstVisit()) {
										vm.firstVisitList.forEach(function(disease){
											if (vm.recordData.recordDiagnosis.indexOf(disease.diseaseName>=0)) {
												vm.checkDiseases.push(disease.diseaseCode);
												console.log("BBBB:"+disease.diseaseCode);
											}
										});
									}else{
										vm.diseaseList.forEach(function(disease){
											if (vm.recordData.recordDiagnosis.indexOf(disease.diseaseName)>=0) {
												vm.checkDiseases.push(disease.diseaseCode);
												console.log("CCCC:"+disease.diseaseCode);
											}
										});
									}
								}
								vm.getDisposals();
								vm.$store.commit({
									type: "setReFirstDone",
									reFirstDone: "FIRSTDONE"
								});
								//通知处置勾选回显数据
								vm.$store.commit({
									type: "setReDisposal",
									reDisposal: "DSSEND"
								});
        					}
                        }else{
                        	vm.$notify({
					          title: '失败',
					          message: '初诊数据加载失败',
					          type: "warning"
					        });
                        }
                    },
                    error:function(){
                    	vm.$notify({
					          title: '失败',
					          message: '网络异常初诊数据加载失败',
					          type: "error"
					        });
                    }
                })
			});
		},
		watch:{
			symptomPanelData:{
					handler(curVal,oldVal){
						this.checkDiseases = [];
						console.log("清除选择的疾病");
					},
					deep:true
				},
			checkDiseases:{
				handler(curVal,oldVal){
					//获取已勾选的疾病
					var checkList = [];
					var haveCheck = '-'+this.checkDiseases.join('-')+'-';
					this.emergencyDisease.forEach(function(disease){
					if (haveCheck.indexOf('-'+disease.diseaseCode+'-')>=0) {
						checkList.push(disease);
					}});
					this.diseaseList.forEach(function(disease){
					if (haveCheck.indexOf('-'+disease.diseaseCode+'-')>=0) {
						checkList.push(disease);
					}});
					console.log("保存初诊");
					this.$store.commit({
							type: "setFirstVisitData",
							firstVisitData: {
								diseases: checkList
							}
						});
					}
				},
			recordData:{
					handler(curVal,oldVal){
						this.firstVisitList = [];
						this.emergencyDisease = [];
						this.checkDiseases = [];
					},
					deep:true
			}
		}
}
</script>
<style type="text/css">
	.firstVisit{
	height: 700px;
	border: 1px solid #cccccc;
	background-color: #ffffff;
	text-align: left;
	padding-left: 10px;
	line-height: 30px;
	}
	.visitContent{
		overflow: auto;
		height: 668px;
	}
	.operation i{
		cursor: pointer;
		line-height: 35px;
	}
	.el-dialog__body{
		padding-top: 10px;
	}
</style>